<template>
  <view class="content">
    <statusTip v-if="pageTips.show" :status="pageTips.status"></statusTip>
	<echartsUniapp v-else :option="option" :chartData="dataSource" :config="config" :id="id"></echartsUniapp>
  </view>
</template>

<script lang="ts" setup>
import { echartProps } from '@/pages-work/components/echarts/props';
import {deepMerge, handleTotalAndUnit, disposeGridLayout, addImgPrefix} from '../../common/echartUtil';
import { isNumber } from '@/utils/is';
import useChartHook from '@/pages-work/components/hooks/useEchart';
import { deepClone } from '@/uni_modules/da-tree/utils';
import echartsUniapp from '@/pages-work/components/echarts/index.vue';
import statusTip from '@/pages-work/components/statusTip.vue';
import {merge} from "lodash-es";
//组件传参
const props = defineProps({
	...echartProps
})
//最终图表配置项
const option = ref({});
const symbol =
    'image://';
let chartOption: any = {
  title: {
    show: true,
  },
  xAxis: {
    show: true,
    max: 0,
    splitLine: true,
    offset: 10,
    axisTick: false,
    axisLine: false,
    axisLabel: {
      margin: 10,
      fontSize: 14,
      color: '#333'
    },
  },
  yAxis: {
    data: [],
    splitLine: false,
    show: true,
    axisTick: { show: false },
    axisLine: { show: false },
    axisLabel: {
      margin: 15,
      fontSize: 14,
      color: '#eee'
    },
  },
  series: [
    {
      type: 'pictorialBar',
      symbol: symbol,
      symbolRepeat: 'fixed',
      symbolMargin: '5%',
      symbolClip: true,
      symbolSize: 30,
      symbolBoundingData: 0,
      data: [],
    },
    {
      type: 'pictorialBar',
      itemStyle: {
        normal: {
          opacity: 0.2,
        },
      },
      label: {
        show: true,
        position: 'right',
        offset: [10, 0],
        textStyle: {
          fontSize: 14,
          color: '#333',
          fontWeight: 500,
        },
      },
      animationDuration: 0,
      symbol: symbol,
      symbolRepeat: 'fixed',
      symbolMargin: '5%',
      symbolSize: 30,
      symbolBoundingData: 0,
      data: [],
    },
  ],
};

//图表数据查询
let [{ dataSource, reload, pageTips, config }, { queryData }] = useChartHook(
  props,
  initOption
)


//初始化图表配置项
function initOption(data) {
  let chartData: any = dataSource.value
  if (typeof chartData === 'string') {
    chartData = JSON.parse(chartData)
  }
  if (chartData && chartData.length > 0) {
    let maxData = 0;
    chartData.forEach(ele => {
      if (ele.value > maxData) maxData = ele.value;
    });
    let seriesValueData = chartData.map((item) => {
      return item.value;
    });
    let seriesNameData = chartData.map((item) => {
      return item.name;
    });
    chartOption.xAxis.max = maxData;
    chartOption.yAxis.data = seriesNameData;
    chartOption.series.forEach(item=>{
      item.data = seriesValueData;
      item.symbolBoundingData = maxData;
      item.symbolSize = props.config.option?.symbolSize || 30;
      item.symbol = props.config.option?.symbol?"image://"+addImgPrefix(props.config.option?.symbol):symbol;
    })
    chartOption.series[0].symbolMargin = props.config.option.symbolMargin || '5%'
    // 合并配置
    if (props.config && config.option) {
      merge(chartOption, config.option)
      chartOption = handleTotalAndUnit(props.compName, chartOption, config, chartData)
      chartOption = disposeGridLayout(props.compName, chartOption, config, chartData)
		  option.value = deepClone(chartOption)
		  pageTips.show = false
    }
  } else {
    pageTips.status = 1
    pageTips.show = true
  }
}

onMounted(()=>{
	queryData();
})
defineExpose({
  queryData
});
</script>
<style scoped>
.content {
  padding: 10px;
}
</style>
